
//=================  layui引入分页器  ==================
let query = {
  page: 1,
  limit: 10
}
function jumpPage(count) {

  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage
      , layer = layui.layer;

    laypage.render({
      elem: 'demo7'
      , count
      , curr: query.page
      , limit: query.limit
      , layout: ['count', 'prev', 'page', 'next', 'skip']
      , jump: function (obj, first) {
        // console.log(obj)
        query.page = obj.curr
        query.limit = obj.limit

        if (!first) {
          getArticleCate()
        }
      }
    });
  })
}

// =========================获取表单页面=============================

getArticleCate()

function getArticleCate() {
  axios
    .get('/ydd_cate/list')
    .then(({ data: { data } }) => {
      jumpPage(data.count)
      let i = 0
      let htmlStr = data.data.map((item, i) => {
        // console.log(item);
        i += 1
        return `
            <tr>
            <td>${i}</td>
            <td>${item.id}</td>
            <td>${item.catename}</td>
            <td>${item.icon}</td>
            <td>${item.sort_num}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.id}">编辑</button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${item.id}">删除</button>
                </td>
              </tr>
            `
      }).join('')
      $('#tbody').html(htmlStr)
    })
}

// ========================= 添加类别功能 ============================
let addFormStr = `
    <form id="addForm" class="layui-form">
    <!-- 第一行 分类名称 -->
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-block">
        <input type="text" name="catename" required lay-verify="required" placeholder="请输入分类名" autocomplete="off"
          class="layui-input" style="width: 350px;">
      </div>
    </div>
    <!-- 第二行 图标class  -->
    <div class="layui-form-item">
      <label class="layui-form-label">图标class</label>
      <div class="layui-input-block">
        <input type="text" name="icon" required lay-verify="required" placeholder="请输入class名" autocomplete="off"
        class="layui-input" style="width: 150px;">
        <a href="https://fontawesome.com.cn/v4/icons-ui/">具体参见fontawesome图标库</a>
      </div>
    </div>

    <!-- 第三行 权重大小 -->
    <div class="layui-form-item">
      <label class="layui-form-label">权重</label>
      <div class="layui-input-block">
        <input type="text" name="sort_num" required lay-verify="required|number" placeholder="请输入数量" autocomplete="off"
          class="layui-input" style="width: 83px;">
      </div>
    </div>
    
    <!-- 第四行 按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    </form>
    `
let indexAddForm
$('#btnAddCate').click(function () {
  indexAddForm = layer.open({
    type: 1, //页面层
    title: '添加分类',
    area: ['500px', '250px'],
    content: addFormStr
  });
})

// 点击刷新
$('#TT').on('click' , function() {
  document.location.reload()
})

 // 点击收缩
 $('#close').on('click', function () {
  $('.search').toggle()
  $('#close').hide()
  $('#open').show()
})

$('#open').on('click', function () {
  $('.search').show()
  $('#open').hide()
  $('#close').show()
})

// =================表单提交======================
// 因为表单是动态创建的，所以注册事件需要用事件委托
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  // console.log(data);
  axios.post('/ydd_cate/add', data).then(({ status }) => {
    if (status !== 200) {
      return layer.msg('添加失败')
    }
    // 新增成功后，需要做以下事情
    // 1.关闭弹出层
    layer.close(indexAddForm)
    // 2.重新获取所有的分类渲染展示到页面中
    getArticleCate()
    // 3、提示
    layer.msg('新增分类成功')
  })
})

// =================编辑表单======================
let form = layui.form
let indexEditForm
let editFormStr = `
  <form id="editForm" class="layui-form" lay-filter="editForm">
 
  <!-- 第一行 ID  隐藏掉 -->
  <div class="layui-form-item">
  <div class="layui-input-block" style="display:none">
    <input type="text" name="id"  placeholder="请输入ID" autocomplete="off"
      class="layui-input">
  </div>
  <!-- 第二行 分类名称 -->
    <label class="layui-form-label">分类名称</label>
    <div class="layui-input-block">
      <input type="text" name="catename" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 图标class  -->
  <div class="layui-form-item">
    <label class="layui-form-label">图标class</label>
    <div class="layui-input-block">
      <input type="text" name="icon" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input" style="width: 150px;">
        <a href="https://fontawesome.com.cn/v4/icons-ui/">具体参见fontawesome图标库</a>
    </div>
  </div>
  <!-- 第四行 权重大小  -->
  <div class="layui-form-item">
      <label class="layui-form-label">权重</label>
      <div class="layui-input-block">
        <input type="text" name="sort_num" required lay-verify="required" placeholder="请输入数量" autocomplete="off"
          class="layui-input" style="width: 83px;">
      </div>
    </div>
  <!-- 第五行 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
    </div>
  </div>
  </form>
  `
$('#tbody').on('click', '.btn_edit', function () {
  let Id = $(this).attr('data-id')
  indexEditForm = layer.open({
    type: 1, //页面层
    title: '修改分类', //标题
    area: ['500px', '250px'], // 宽高
    content: editFormStr   //内容
  });

  axios.get('/ydd_cate/rowInfo?id=' + Id).then(({ data: res }) => {
    // console.log(res);
    form.val('editForm', res.data)
  })
})

// 接口文档要求Id，为了收集到Id,所以再复制出一行，改name为Id
// 且因为编辑页面是动态创建的，所以需要用事件委托来做
$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/ydd_cate/update', data).then(({ data, status }) => {
    // console.log(res);
    if (status !== 200) {
      return layer.msg('添加失败')
    }
    // 如果成功，需要做以下三步
    // 1、关闭提示框
    layer.close(indexEditForm)
    // 2、渲染出新的内容
    getArticleCate()
    // 3、提示
    layer.msg('编辑成功')
  })
})

// =================删除表单======================
$('#tbody').on('click', '.btn_delete', function () {
  let id = $(this).attr('data-id')
  axios.get('/ydd_cate/del?id=' + id).then(({ data, status }) => {
    if (status !== 200) {
      return layer.msg('失败')
    }
    // 成功提示
    layer.msg("成功")
    // 重新渲染
    getArticleCate()
  })
})

// ==================== 页面头部 ======================

// 分类管理 点击收缩
$('#TT').on('click', function () {
  document.location.reload()
})

$('#close').on('click', function () {
  $('.search').toggle()
  $('#close').hide()
  $('#open').show()
})

$('#open').on('click', function () {
  $('.search').show()
  $('#open').hide()
  $('#close').show()
})


// 头部 点击显示时间
const layer = layui.layer

layui.use('laydate', function () {
  let laydate = layui.laydate;

  //1执行一个laydate实例
  laydate.render({
    elem: '#startDate' //指定元素
  });

  //2执行一个laydate实例
  laydate.render({
    elem: '#endDate' //指定元素
  });
});


// 头部 点击分类下滑菜单
axios.get('/ydd_cate/all').then(({ data: { data } }) => {
  console.log(data);
  $('[name="cateid"]').append(data.map(({ catename, id }) => catename ? `
     <option value="${id}" >${catename}</option>` : '').join(''))
  form.render()
})